<template>
  <div class="myListen">
    <div class="title">最近听过</div>
    <ul class="list">
      <li class="song" v-for="(item,index) in listenedSongs" :key="index">
        <span>{{ item.val }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listenedSongs: []
    };
  },
  mounted() {
    const localSongList = window.localStorage;
    for (let i = 0; i < localSongList.length; i++) {
      let key = localSongList.key(i); // 键：歌曲id
      let val = localSongList.getItem(key); // 值：歌曲名
      let reg = /^listened(\d{10})$/;
      if(reg.test(key)){
        this.listenedSongs.push({ key, val });
      }
    }
  }
};
</script>

<style scoped>
.title {
  padding: 20px;
  overflow: hidden;
  background-color: #fff;
}

.list {
  top: 72px;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  word-break: break-all;
  background-color: rgb(228, 231, 231);
  border-bottom: 1px solid #e5e5e5;
  border-top: 1px solid #e5e5e5;
}

li {
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  border-bottom: 1px solid #fff;
  padding-left: 30px;
  height: 40px;
  line-height: 40px;
  background-color: rgb(239, 245, 245);
  font-weight: 400;
  font-size: 16px;
}
</style>